<template>
<el-avatar v-bind="$attrs" :style="[colorStyle]"><slot>{{word}}</slot></el-avatar>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import ColorHash from 'color-hash'

@Component
export default class ColorAvatar extends Vue {
  @Prop(String) text!: string

  @Prop(Boolean) initial!: boolean

  @Prop() color!: any

  get word () {
    if (!this.text) return ''
    return this.initial ? this.text.slice(0, 1).toUpperCase() : this.text
  }

  get rbg () {
    const c = String(this.color || this.text)
    return new ColorHash().hex(c)
  }

  get colorStyle () {
    return {
      backgroundColor: this.rbg
    }
  }
}
</script>
